<template>
  <div>
    <el-dialog title="服务金额结算" :model-value="props.modelValue" width="800px" @close="$emit('update:modelValue', false)">
      <el-form :model="formData" ref="formRef" :rules="rules" label-suffix=":">
        <el-form-item label="任务名称">
          <el-input disabled :model-value="props.selectedRow?.name"></el-input>
        </el-form-item>
        <el-form-item label="自由职业者" prop="userList">
          <el-table @selection-change="handleSelectionChange" :data="tableData" border>
            <el-table-column type="selection" align="center" width="55" label="操作" />
            <el-table-column prop="name" align="center"  label="竞标人" width="60" />
            <el-table-column prop="phone" align="center"  label="手机号" width="120" />
            <el-table-column prop="cardId" align="center"   label="身份证号" />
            <el-table-column prop="cost" align="center"  label="服务金额（元）" width="120"  >
              <template #default="{row}">
                <el-input-number style="width: 90%;" controls-position="right" v-model="row.cost"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="status" align="center" label="项目状态" width="90"/>
          </el-table>
        </el-form-item>
        <el-form-item label="产品选择" prop="proId">
          <div style="height: 300px;width: 100%;" class="radio-wrapper">
            <el-radio-group style="width: 100%" v-model="formData.proId">
              <el-radio v-for="item in merchantOptions" :label="item.id" >
                <span class="ticket-title">增值税专用发票</span>
                <div class="radio-card">
                  <el-descriptions :column="1">
                    <el-descriptions-item label="产品编号:">{{item?.proNo}}</el-descriptions-item>
                    <el-descriptions-item label="服务费率:">{{item?.costServiceCharge}}%</el-descriptions-item>
                    <el-descriptions-item label="单人单月发放上限:">{{item?.max || ''}}</el-descriptions-item>
                    <el-descriptions-item label="开票项目:">
                     <div style="white-space: normal;"> {{item?.invoiceItems}}</div>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-radio>

              <el-radio v-for="item in merchantOptions" :label="item.id" style="width: 100%;">
                <span class="ticket-title">增值税专用发票</span>
                <div class="radio-card product-detail">
                  <el-descriptions :column="1">
                    <el-descriptions-item label="产品编号:">{{item?.proNo}}</el-descriptions-item>
                    <el-descriptions-item label="服务费率:">{{item?.costServiceCharge}}%</el-descriptions-item>
                    <el-descriptions-item label="单人单月发放上限:">{{item?.max || ''}}</el-descriptions-item>
                    <el-descriptions-item label="开票项目:">
                      {{item?.invoiceItems}}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="服务费承担方" prop="serviceChargeType">
          <el-radio-group style="width: 100%" v-model="formData.serviceChargeType">
            <el-radio :label="1">用工企业承担</el-radio>
            <el-radio :label="2">自由职业者承担</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="$emit('update:modelValue', false)">关闭</el-button>
          <el-button type="primary" @click="onSubmit" :loading="loading"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'

  const emit = defineEmits(['update:modelValue'])

  const rules = reactive({
    userList: [{ required: true, trigger: 'change' }],
    proId: [{ required: true, trigger: 'blur' }],
    serviceChargeType: [{ required: true, trigger: 'blur' }],
})
const merchantOptions = ref([])


const formData = reactive({
    no: '',
    busType: '',
    taskId: '',
    name: '',
    proId: '',
    proNo: '',
    userList: [],
    serviceChargeType: 1, // 1:用工企业承担 2:自由职业者承担
})

const projectDetails = computed(() => {
  return merchantOptions.value.find(item => item.id === formData.proId) || {}
})



const tableData = ref([
    {
        // name: '张三',
        // phone: 1888888888,
        // cardId: '411528199999999999',
        // cost: 9999,
        // status: 'NORMAL',
    }
])

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  formData.userList = val.map(item => item.cardId)
}

  const loading = ref(false)


  const props = defineProps({
      modelValue: {
          type: Boolean
      },
      selectedRow: {},
  })


  watch(() => props.selectedRow, async data => {
    const defaultProvider = useUserStore().defaultProvider;

    const { response } = await useRequest('/payment/bill/balanceEnrollList', 'GET', {
        params: {
            taskId: data.id
        }
    }, { immediate: true })

    if ( response.value?.rows.length) {
        tableData.value = response.value?.rows
    }

    const { data: merchantList } = await useRequest('/payment/merchantProduct/queryList', 'GET', {
    params: { busType: props.selectedRow.busType, sydId: defaultProvider.sydId }
  }, { immediate: true })


  if (merchantList) {
    merchantOptions.value = merchantList.value
  }


  })

  const onSubmit = () => {
    loading.value = true

    // TODO 确认接口入参
    const submitData = {
        ...formData,
        ...props.selectedRow,
        ...projectDetails.value
    }
    useRequest('/payment/bill/qdPaymentImport', "POST", {
        data: submitData
    }, { immediate: true,
        onFinish() {
            loading.value = false
        },
        onSuccess: (data) => {
            emit('update:modelValue', false)
        }
     })

  }


</script>

<style lang="scss" scope>




.radio-wrapper {
    width: 100%;
    height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
    padding: 10px;
    .radio-card {
        padding: 35px 20px 0 20px;
        width: 640px;
        border: 1px dashed #ccc
    }
    .ticket-title {
            position: absolute;
            top: 32px;
            left: 40px;
        }
    .el-radio {
        display: block;
        width: 100%;
       /* height: 220PX;*/
        position: relative;
        .el-radio__input {
            position: absolute;
            top: 40px;
            left: 20px;
        }
    }
}
</style>
